import {Component, ComponentFactory, ComponentFactoryResolver, OnInit, ViewChild, ViewContainerRef} from '@angular/core'
import { Router } from '@angular/router'
import {ApiService} from "../../services/api.service";
import {TagCreateCustomerComponent} from "../../components/tag-create-customer/tag-create-customer.component";
import {TagCreateProductComponent} from "../../components/tag-create-product/tag-create-product.component";
import {TagCreateGroupComponent} from "../../components/tag-create-group/tag-create-group.component";
import {QlMessageService} from "qloud-angular/package/qloud-angular";
import {GroupCreateGroupattrComponent} from "../../components/group-create-groupattr/group-create-groupattr.component";
import {GroupCreateManageattrComponent} from "../../components/group-create-manageattr/group-create-manageattr.component";

@Component({
  selector: 'app-add-group',
  templateUrl: './add-group.component.html',
  styleUrls: ['./add-group.component.css']
})
export class AddGroupComponent implements OnInit {
  // // 切换参数
  // public sex: ''
  // public age: ''
  // public school: ''
  // public xz: ''
  // public income: ''
  // public channel: ''
  // public level: ''
  // public state: ''
  // public product: ''
  // public risk: ''
  // public tztype: ''
  // public integral: ''
  // public groupstate = [{ value: '开启', label: '开启' }, { value: '关闭', label: '关闭' }]
  // public grouptype = [{ value: '小资', label: '小资' }, { value: '社会精英', label: '社会精英' }]
  //
  // constructor(private router: Router) {}
  //
  // ngOnInit() {}
  //
  // // 切换选项显示
  // public closeTag(event) {
  //   console.log('event:'+this.sex)
  //   switch (event) {
  //     case 1:
  //       this.sex = null
  //       break
  //     case 2:
  //       this.age = null
  //       break
  //     case 3:
  //       this.school = null
  //       break
  //     case 4:
  //       this.income = null
  //       break
  //     case 5:
  //       this.channel = null
  //       break
  //     case 6:
  //       this.level = null
  //       break
  //     case 7:
  //       this.state = null
  //       break
  //     case 8:
  //       this.product = null
  //       break
  //     case 9:
  //       this.risk = null
  //       break
  //     case 10:
  //       this.tztype = null
  //       break
  //     case 11:
  //       this.integral = null
  //       break
  //   }
  // }
  // // 保存群组
  // public saveGroup(){
  //   this.router.navigateByUrl('/customer/customer-group')
  // }
  @ViewChild('container', { read: ViewContainerRef, static: true })
  container: ViewContainerRef;
  custAttr = '';
  classifyAttr = '';
  adddata ={};
  // 当前步骤
  public current = 0;
  // 步骤列表
  public steps: any[] = [];

  constructor(private resolver: ComponentFactoryResolver,
              private apiService: ApiService,
              private router: Router,
              private message: QlMessageService) {}

  ngOnInit() {
    this.createSteps()
    // this.store.dispatch(new ResetAddAlgoAction())
  }

  /**
   * 下一步
   */
  nextStep() {
    // 当前步骤组件
    const { component } = this.steps[this.current]
    // 当前步骤是否可以提交
    if (!component) {
      return
    }

    const result = component.instance.submit()
    if(result['custAtrr']){
      this.adddata['filter'] = result['custAtrr'];
      console.log(' this.custAttr:'+JSON.stringify(result['custAtrr']))
    }
    if(result['manageAtrr']){
      this.adddata['manageAtrr'] = result['manageAtrr'];
    }
    if (result === false) {
      return false
    }

    // 当前步骤是否最后一步
    if (this.current >= this.steps.length - 1) {
      return
    }

    this.current += 1
    // 生成当前步骤
    this.generateCurrentStep()
  }

  /**
   * 上一步
   */
  previouStep() {
    this.current -= 1
    this.generateCurrentStep()
  }

  /**
   * 生成当前步骤组件
   */
  generateCurrentStep() {
    // 分离容器
    this.container.detach()
    // 获取当前步骤组件
    const currentStep = this.steps[this.current]
    // 如果已生成竹节插入视图
    // 否则重新创建组件
    if (currentStep.component) {
      this.container.insert(currentStep.component.hostView)
      // 调用初始化逻辑
      currentStep.component.instance.ngOnInit()
    } else {
      const component = this.container.createComponent(currentStep.factory)
      currentStep.component = component
    }
  }

  /**
   * 创建步骤
   */
  public createSteps() {
    const groupCreateGroupattrComponent: ComponentFactory<
      GroupCreateGroupattrComponent
      > = this.resolver.resolveComponentFactory(GroupCreateGroupattrComponent)

    const groupCreateManageattrComponent: ComponentFactory<GroupCreateManageattrComponent> = this.resolver.resolveComponentFactory(
      GroupCreateManageattrComponent
    )

    this.steps = [
      {
        component: null,
        factory: groupCreateGroupattrComponent
      },
      {
        component: null,
        factory: groupCreateManageattrComponent
      },
    ]

    this.generateCurrentStep()
  }

  /**
   * 提交请求
   */
  onSubmit() {
    // 确保最后一步提交
    if (this.nextStep() === false) {
      return
    }
    let param = {
      filterData:this.adddata['filter'],
    };
    let manageAtrr =this.adddata['manageAtrr'];
    let Data= Object.assign(param,manageAtrr);
    this.apiService.creatGroup(Data).subscribe(list => {
      this.message.success('添加群组成功')
      this.router.navigate(['/customer/customer-tag'])
    })

    // this.router.navigate(['/customer/customer-tag'])
  }
}
